<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p>Object for configuring the position of the panel.</p>

</div>


<div>
  

  


  <section class="api-section">
    <h2 id="Usage">Usage</h2>
      <h4 id="centering-the-panel">Centering the panel</h4>
<hljs lang="js">
new MdPanelPosition().absolute().center();
</hljs>

<h4 id="overlapping-the-panel-with-an-element">Overlapping the panel with an element</h4>
<hljs lang="js">
new MdPanelPosition()
    .relativeTo(someElement)
    .addPanelPosition(
      $mdPanel.xPosition.ALIGN_START,
      $mdPanel.yPosition.ALIGN_TOPS
    );
</hljs>

<h4 id="aligning-the-panel-with-the-bottom-of-an-element">Aligning the panel with the bottom of an element</h4>
<hljs lang="js">
new MdPanelPosition()
    .relativeTo(someElement)
    .addPanelPosition($mdPanel.xPosition.CENTER, $mdPanel.yPosition.BELOW);
</hljs>
  </section>


  

  
<section class="api-section">
  <h2>Methods</h2>
  <br/>
  <ul class="methods">
    <li id="absolute">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.absolute();
</code>
      </h3>
      <div class="service-desc"><p>Positions the panel absolutely relative to the parent element. If the parent
is document.body, this is equivalent to positioning the panel absolutely
within the viewport.</p>
</div>

      <div class="method-param-table">

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="relativeTo">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.relativeTo(element);
</code>
      </h3>
      <div class="service-desc"><p>Positions the panel relative to a specific element.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* element</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code><code class="api-type label type-hint type-hint-element">Element</code><code class="api-type label type-hint type-hint-angular">angular.JQLite</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code><code class="api-type label type-hint type-hint-element">Element</code><code class="api-type label type-hint type-hint-angular">angular.JQLite</code></td>
        <td class="description">
          <p>Query selector, DOM element,
    or angular element to position the panel with respect to.</p>

          
        </td>
      </tr>
    
  
  
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="top">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.top([top]);
</code>
      </h3>
      <div class="service-desc"><p>Sets the value of <code>top</code> for the panel. Clears any previously set vertical
position.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          top
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Value of <code>top</code>. Defaults to &#39;0&#39;.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="bottom">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.bottom([bottom]);
</code>
      </h3>
      <div class="service-desc"><p>Sets the value of <code>bottom</code> for the panel. Clears any previously set vertical
position.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          bottom
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Value of <code>bottom</code>. Defaults to &#39;0&#39;.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="start">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.start([start]);
</code>
      </h3>
      <div class="service-desc"><p>Sets the panel to the start of the page - <code>left</code> if <code>ltr</code> or <code>right</code> for
<code>rtl</code>. Clears any previously set horizontal position.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          start
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Value of position. Defaults to &#39;0&#39;.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="end">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.end([end]);
</code>
      </h3>
      <div class="service-desc"><p>Sets the panel to the end of the page - <code>right</code> if <code>ltr</code> or <code>left</code> for <code>rtl</code>.
Clears any previously set horizontal position.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          end
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Value of position. Defaults to &#39;0&#39;.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="left">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.left([left]);
</code>
      </h3>
      <div class="service-desc"><p>Sets the value of <code>left</code> for the panel. Clears any previously set
horizontal position.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          left
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Value of <code>left</code>. Defaults to &#39;0&#39;.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="right">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.right([right]);
</code>
      </h3>
      <div class="service-desc"><p>Sets the value of <code>right</code> for the panel. Clears any previously set
horizontal position.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          right
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Value of <code>right</code>. Defaults to &#39;0&#39;.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="centerHorizontally">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.centerHorizontally();
</code>
      </h3>
      <div class="service-desc"><p>Centers the panel horizontally in the viewport. Clears any previously set
horizontal position.</p>
</div>

      <div class="method-param-table">

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="centerVertically">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.centerVertically();
</code>
      </h3>
      <div class="service-desc"><p>Centers the panel vertically in the viewport. Clears any previously set
vertical position.</p>
</div>

      <div class="method-param-table">

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="center">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.center();
</code>
      </h3>
      <div class="service-desc"><p>Centers the panel horizontally and vertically in the viewport. This is
equivalent to calling both <code>centerHorizontally</code> and <code>centerVertically</code>.
Clears any previously set horizontal and vertical positions.</p>
</div>

      <div class="method-param-table">

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="addPanelPosition">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.addPanelPosition(xPosition, yPosition);
</code>
      </h3>
      <div class="service-desc"><p>Sets the x and y position for the panel relative to another element. Can be
called multiple times to specify an ordered list of panel positions. The
first position which allows the panel to be completely on-screen will be
chosen; the last position will be chose whether it is on-screen or not.</p>
<p>xPosition must be one of the following values available on
$mdPanel.xPosition:</p>
<p>CENTER | ALIGN_START | ALIGN_END | OFFSET_START | OFFSET_END</p>
<pre>
   *************
   *           *
   *   PANEL   *
   *           *
   *************
  A B    C    D E

A: OFFSET_START (for LTR displays)
B: ALIGN_START (for LTR displays)
C: CENTER
D: ALIGN_END (for LTR displays)
E: OFFSET_END (for LTR displays)
</pre>

<p>yPosition must be one of the following values available on
$mdPanel.yPosition:</p>
<p>CENTER | ALIGN_TOPS | ALIGN_BOTTOMS | ABOVE | BELOW</p>
<pre>
  F
  G *************
    *           *
  H *   PANEL   *
    *           *
  I *************
  J

F: BELOW
G: ALIGN_TOPS
H: CENTER
I: ALIGN_BOTTOMS
J: ABOVE
</pre></div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* xPosition</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          
          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* yPosition</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          
          
        </td>
      </tr>
    
  
  
    
  
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="withOffsetX">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.withOffsetX(offsetX);
</code>
      </h3>
      <div class="service-desc"><p>Sets the value of the offset in the x-direction.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* offsetX</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          
          
        </td>
      </tr>
    
  
  
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="withOffsetY">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">MdPanelPosition.withOffsetY(offsetY);
</code>
      </h3>
      <div class="service-desc"><p>Sets the value of the offset in the y-direction.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* offsetY</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          
          
        </td>
      </tr>
    
  
  
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-mdpanelposition">MdPanelPosition</code></td>
    <td class="description"></td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    </ul>
</section>
  
  



  
</div>


</div>
